.bd {
  border: 1px solid black;
}
.bd-bt {
  border-bottom: 1px solid black;
}

.box {
  width: 750px;
  margin: 0 auto;
  background-color: #ddd;
  padding: 20px;
  border-radius: 10px;
  .container {
    &:nth-of-type(1) {
      border-top: 1px solid #fff;
    }
    .bd-bt();
    border-color: #fff;
    display: flex;
    padding: 10px 0;
    .img-box {
      // 使用定义的样式 .bd
      // .bd();
      .img {
        display: block;
        width: 100px;
      }
    }
    .info-box {
      padding-left: 20px;
      // 也可以把这个元素设置成flex容器
      display: flex;
      // 主轴方向是从上到下，是垂直方向
      flex-direction: column;
      // 规定item在主轴方向上的对齐方式
      justify-content: space-around;
      flex: 1;
      // .bd();
      .name {
        // .bd();
      }
      .opt {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // .bd();
        // 价格
        .price {
          color: red;
        }
        // + -
        .opt-box {
          display: flex;
          span {
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            .bd();
            &.num {
              width: 60px;
              border-left: none;
              border-right: none;
            }
          }
        }
      }
    }
  }
}
